<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
  <title>SEVENTEEN</title>
  <link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="./js/swiper/swiper.min.css" />
  <link rel="stylesheet" href="./css/animation.css">
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./css/style.css" />
  <script src="./js/swiper/swiper.min.js"></script>
  <script src="./js/common/vue.3.2.js"></script>
</head>

<body>
  <div id="ny">
    <!-- Header -->
    <header class="header up-move-down">
      <div class="container">
        <a href="index.html" class="logo">
          <img src="./images/logo.png" alt="SEVENTEEN" />
        </a>

        <nav class="main-nav">
          <ul class="top">
            <li><input type="text" placeholder="输入查找项..."></li>
            <li><a href="#"><i class="fa fa-search"></i></a></li>
          </ul>
          <ul class="bottom">
            <li><a href="index.html" class="active">首页</a></li>
            <li>
              <a href="detail.html">关于</a>
              <ul class="menu-2 bown-move-up">
                <li><a href="news.html">相关新闻</a></li>
                <li><a href="dynamic.html">近期动态</a></li>
              </ul>
            </li>
            <li><a href="news.html">相关新闻</a></li>
            <li><a href="dynamic.html">近期动态</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <!-- banner -->
    <section class="ny-banner">
      <img class="wh-full" src="./images/banner.png" alt="">
    </section>

    <!-- location -->
    <section class="location">
      <div class="lw">
        <div class="location-full animate-left-move-right">
          <a href="/index">首页</a>
          &gt;<a href="/about">相关新闻</a>
        </div>
        <div class="location-nav animate-left-move-right">
          <h1>相关新闻</h1>
          <ul>
            <li><a href="detail.html">关于</a></li>
            <li class="act"><a href="news.html">相关新闻</a></li>
            <li><a href="dynamic.html">近期动态</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>
        </div>
      </div>
    </section>

    <!-- news -->
    <section id="news">
      <div class="lw">
        <ul>
          <li v-for="(item,index) in list" class="animate-down-move-up">
            <div class="img animate-left-move-right">
              <img class="wh-full" :src="`./images/${item.img}`" alt="">
            </div>
            <div class="info">
              <div>
                <h1 class="animate-right-move-left">{{item.title}}</h1>
                <p class="animate-right-move-left" v-html="item.info"></p>
              </div>
              <a href="#" class="btn animate-down-move-up">Read More</a>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <script type="module">
      var app = Vue.createApp({
        data() {
          return {
            list: [
              {
                title: 'HOSHI SOLO曲DAMAGE 5月26日17：00上线🔥',
                info: '🔥权顺荣个人solo曲［Damage］将于5月26日北京时间17点公开，大家可以提前将歌单准备好，在音源公布后再加入即可。',
                img: 'new1.jpg'
              },
              {
                title: '2024.7.16起担任 迪赛DIESEL 品牌大使',
                info: '迪赛DIESEL<br>👑代言Title：品牌大使<br>代言日期：2024.7.16起<br>品牌简介：🇮🇹意大利时装品牌，1987年创立，「牛仔三巨头」之一，为意大利时尚集团OTB(Only The Brave)旗下的最大品牌之一',
                img: 'new2.png' 
              },
              {
                title: '宗家府Jongga 首位且唯一的宣传大使',
                info:'宗家府Jongga<br>👑代言Title：宣传大使(宗家首位且唯一的宣传大使)<br>代言日期：2023.9.25-至今(已续约💯)<br>品牌简介：为大象集团旗下🇰🇷韩国&🌍全球销售量排名第一的世界级泡菜品牌，品牌于1987年创立',
                img: 'new3.jpg' 
              },
              {
                title: '黛尔珀全球品牌大使',
                info: `黛尔珀d'Alba<br>👑代言Title：由品牌大使升至➡️全球品牌大使<br>代言日期：2023.6.30-至今(续约并升title💯)<br>品牌简介：以来自🇮🇹意大利产区白松露为主要原料的强调护肤美食理念的韩国护肤品牌`,
                img: 'new4.jpg' 
              }
            ]
          };
        },
        mounted() {
          this.init()
        },
        methods: {
          init() {
            console.log('vue已挂载');
          }
        },
      })
      app.mount("#news");
    </script>



    <!-- Footer -->
    <footer class="footer">
      <div class="lw">
        <div class="footer-top">
          <img class="logo" src="./images/logo.png" alt="">
          <p>本网站上的所有文字、图片和其他内容均为 © xxxxx 版权所有，保留所有权利。</p>
        </div>
        <div class="footer-bottom">
          <div class="title">
            <h1>联系我们</h1>
            <a href="#" class="wxIcon">
              <i class="fa fa-weixin"></i>
            </a>
          </div>
          <div class="content">
            <p>地址: xx省 xx市 xxxxx地址</p>
            <p>邮政编码:123456</p>
            <p>传真号码:86-512-12345678</p>
            <p>联系电话:86-512-12345678</p>
            <p style="text-align: right;">©2025 xxxx 版权所有</p>
          </div>
        </div>
      </div>
    </footer>

  </div>

  <!-- JavaScript -->
  <script src="./js/common.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      initAll()
    })
  </script>
</body>

</html>